<template>
  <div>
    <div class="pic-box">
      <pic-zoom :url="pImgSrc" :scale="3"></pic-zoom>
    </div>
    <div class="box">
      <comSwiper @choose="choose"></comSwiper>
    </div>
  </div>
</template>
<script>
import PicZoom from "./PicZoom";
import comSwiper from './swiper';
export default {
  name: "Carousel",
  components: {
    PicZoom,
    comSwiper
  },
  data() {
    return {
      pImgSrc: ""
    };
  },
  props: {
    imgSrc: {
      type: String,
      default: ""
    },
    imagesList: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  methods: {
    getIndex(imgSrc) {
      console.log(imgSrc,this.imagesList)
      this.pImgSrc = imgSrc;
    },
    choose(img){
      console.log(img)
      this.pImgSrc = img;
    }
  },
  watch: {
    imgSrc: {
      handler(aImgSrc, pImgSrc) {
        console.log('first',aImgSrc)
        this.pImgSrc = aImgSrc;
      },
      immediate: true
    }
  }
};
</script>
<style lang="scss" scoped>
.box {
  // width: 500px;
  height: 100px;
  overflow: hidden;
  margin-top: 10px;
  ul {
    position: absolute;
    width: 2000px;

    li {
      display: inline-block;
      list-style: none;
      width: 90px;
      height: 90px;
      background-color: white;
      margin-top: 15px;
      border: 1px solid #eee;
      overflow: hidden;
      margin-right: 10px;
      img {
        width: 100%;
      }
    }
  }
}
.pic-box {
  position:relative;
  width: 498px;
  height: 334px;
  border: 1px solid #eee;
}
/deep/ .mouse-cover-canvas {
  top: 200px !important;
  margin-top: 200px;
}

.img-url {
  display: inline-block;
  border: 1px solid #eee;
  margin-right: 10px;
  &:nth-child(5) {
    margin-right: 0;
  }
  img {
    width: 90px;
  }
}
</style>
